<template>
  <div class="add-life-record-form">
    <a-form :model="form" :rules="rules" ref="formRef" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="姓名" name="name">
            <a-input v-model:value="form.name" placeholder="请输入姓名" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="性别" name="gender">
            <a-radio-group v-model:value="form.gender">
              <a-radio value="male">男</a-radio>
              <a-radio value="female">女</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="出生日期" name="birthDate">
            <a-date-picker v-model:value="form.birthDate" placeholder="选择出生日期" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="居住地" name="location">
            <a-input v-model:value="form.location" placeholder="请输入居住地" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="职业" name="profession">
            <a-select v-model:value="form.profession" placeholder="选择职业">
              <a-select-option value="农民">农民</a-select-option>
              <a-select-option value="商人">商人</a-select-option>
              <a-select-option value="学者">学者</a-select-option>
              <a-select-option value="工匠">工匠</a-select-option>
              <a-select-option value="官员">官员</a-select-option>
              <a-select-option value="军人">军人</a-select-option>
              <a-select-option value="僧侣">僧侣</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="天定寿命" name="destinedLifespan">
            <a-input-number v-model:value="form.destinedLifespan" :min="30" :max="200" placeholder="天定寿命（岁）" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSubmit" :loading="submitting"> 提交 </a-button>
          <a-button @click="handleCancel"> 取消 </a-button>
          <a-button @click="handleReset"> 重置 </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useLifeDeathStore } from '@/stores/lifeDeath'

const emit = defineEmits(['success', 'cancel'])

const lifeDeathStore = useLifeDeathStore()
const formRef = ref()
const submitting = ref(false)

const form = reactive({
  name: '',
  gender: 'male',
  birthDate: null,
  location: '',
  profession: '',
  destinedLifespan: 75
})

const rules = {
  name: [{ required: true, message: '请输入姓名' }],
  gender: [{ required: true, message: '请选择性别' }],
  birthDate: [{ required: true, message: '请选择出生日期' }],
  location: [{ required: true, message: '请输入居住地' }],
  profession: [{ required: true, message: '请选择职业' }],
  destinedLifespan: [{ required: true, message: '请输入天定寿命' }]
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true

    const recordData = {
      ...form,
      birthDate: form.birthDate.format('YYYY-MM-DD')
    }

    await lifeDeathStore.addLifeRecord(recordData)
    emit('success')
  } catch (error) {
    if (error.message) {
      message.error(error.message)
    }
  } finally {
    submitting.value = false
  }
}

const handleCancel = () => {
  emit('cancel')
}

const handleReset = () => {
  formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.add-life-record-form {
  padding: 16px;
  color: $text-primary;
}
</style>
